<template>
  <div class="picking zy-content">
    <back-level @click="close"/>
    <!--    <div class="searchBox search-box-layout">-->
    <!--      <Row :gutter="24">-->
    <!--        <Col span="4">-->
    <!--          <div>-->
    <!--            <p class="label">{{ $t('安装位置') }}</p>-->
    <!--            <div class="ipt">-->
    <!--              <Cascader-->
    <!--                  :data="orgList"-->
    <!--                  :transfer="true"-->
    <!--                  v-model="orgCode"-->
    <!--                  change-on-select-->
    <!--                  @on-change="handleCasChange"-->
    <!--              />-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </Col>-->
    <!--        <Col span="4">-->
    <!--          <div>-->
    <!--            <p class="label">{{ $t('equipCheck.SerialNo') }}</p>-->
    <!--            <div class="ipt">-->
    <!--              &lt;!&ndash;              <Input type="text"&ndash;&gt;-->
    <!--              &lt;!&ndash;                     v-model="searchParams.deviceName"&ndash;&gt;-->
    <!--              &lt;!&ndash;                     :placeholder="`${$t('common.inputInfo')}`"/>&ndash;&gt;-->
    <!--              <Select v-model="searchParams.deviceMId" filterable clearable-->
    <!--                      :placeholder="`${$t('common.inputInfo')}${$t('equipCheck.SerialNo')}`"-->
    <!--                      :remote-method="handleRemote"-->
    <!--                      @on-select="handleChangeWl">-->
    <!--                <Option v-for="item in deviceMIdList"-->
    <!--                        :value="item.deviceMId"-->
    <!--                        :label="item.desc"-->
    <!--                        :key="item.deviceMId"/>-->
    <!--              </Select>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </Col>-->
    <!--        <Col span="4">-->
    <!--          <div>-->
    <!--            <p class="label hide-label">&#45;&#45;</p>-->
    <!--            <div class="ipt">-->
    <!--              <Button class="search-btn" type="primary" @click="serachClick">-->
    <!--                {{ $t('common.Query') }}-->
    <!--              </Button>-->
    <!--              <Button @click="chongClick" class="reset-btn">{{ $t('common.reset') }}</Button>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </Col>-->
    <!--      </Row>-->
    <!--    </div>-->
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <span class="nodebtn">
          <Button @click="addEdit">{{ $t('新增节点') }}</Button>
        </span>
      </div>
      <div class="tableContent">
        <Table :columns="columnsList" :data="dataList">
          <template slot-scope="{ row, index }" slot="action">
            <span class="operationBtn" @click="addEdit(row)">{{$t('common.Edit')}}</span>
            <span class="operationBtn" @click="delClick(row)">{{$t('common.Delete')}}</span>
          </template>
        </Table>
      </div>
    </div>

    <Modal :mask-closable="false"
        v-model="firstDeviceVisible"
        :title="titleText"
        class="modal-content-layout"
    >
      <Form ref="firstForm" :model="formValidate" label-position="top">
        <FormItem :label="$t('当前节点')">
          <Input v-model="formValidate.processCode"
                 disabled
                 :placeholder="`${$t('common.inputInfo')}`"
          />
        </FormItem>
        <FormItem :label="$t('节点名称')">
          <Input v-model="formValidate.processNodeName"
                 :placeholder="`${$t('common.inputInfo')}`"
          />
        </FormItem>
        <FormItem :label="$t('上一节点')">
          <Select
                  v-model="formValidate.sourceId"
                  clearable
                  :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="item of oragdataList"
                    :value="item.id"
                    :label="item.processNodeName"
                    :key="item.id"
            />
          </Select>
        </FormItem>
        <FormItem :label="$t('下一节点')">
          <Select
              v-model="formValidate.targetId"
              clearable
              :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="item of oragdataList"
                    :value="item.id"
                    :label="item.processNodeName"
                    :key="item.id"
            />
          </Select>
        </FormItem>
        <FormItem :label="$t('回退节点')">
          <Select
              v-model="formValidate.rollbackId"
              clearable
              :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="item of oragdataList"
                    :value="item.id"
                    :label="item.processNodeName"
                    :key="item.id"
            />
          </Select>
        </FormItem>
        <FormItem :label="$t('节点类型')">
          <Select
              v-model="formValidate.nodeType"
              clearable
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option :value=1 >{{$t('网关节点')}}</Option>
            <Option :value=0 >{{$t('普通节点')}}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('是否跨部门')">
          <Select
              v-model="formValidate.crossSector"
              clearable
              @on-change="crossSectorChange"
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option :value=1 >{{$t('是')}}</Option>
            <Option :value=0 >{{$t('否')}}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('部门配置')" v-if="formValidate.crossSector === 1">
          <Select
              v-model="deptId"
              filterable
              clearable
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option v-for="item in deptList"
                    :value="item.id"
                    :label="item.deptName"
                    :key="item.id"/>
          </Select>
        </FormItem>
        <FormItem :label="$t('角色配置')">
          <Select
              v-model="peopleRoleIds"
              filterable
              multiple
              clearable
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option v-for="item in peoplelist"
                    :value="item.id"
                    :label="item.name"
                    :key="item.id"/>
          </Select>
        </FormItem>
        <FormItem :label="$t('序号')">
          <InputNumber :max="999"
                     v-model="formValidate.processIndex" clearable/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default"  @click="handleFirstCancel">{{$t('common.Cancle')}}</Button>
        <Button type="primary"  @click="handleFirstOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {queryPage,queryProcessInfo,addProcessInfo,editProcessInfo,delProcessInfo} from "@/api/index.js";
import {mapGetters} from "vuex";
export default {
  name: 'index',
  data() {
    return {
      peopleRoleIds:[],
      firstDeviceVisible:false,
      formValidate:{
        processIndex:1
      },
      deptId:"",
      titleText:"",
      columnsList: [
        {
          title: `${ this.$t('节点名称') }`,
          key: 'processNodeName',
          align: 'center',
          // minWidth: 120
        },
        {
          title: `${ this.$t('最新更新人') }`,
          key: 'updateName',
          align: 'center',
          // minWidth: 120
        },
        {
          title: `${ this.$t('更新时间') }`,
          key: 'updateTime',
          align: 'center',
          // minWidth: 120
        },
        {
          title: `${ this.$t('common.operation') }`,
          key: 'action',
          align: 'center',
          slot: 'action'
        }
      ],
      targetRow:{},
      deptList: [],
      peoplelist: [],
      oragdataList: [],
      dataList: []
    }
  },
  computed: {
    ...mapGetters([
      'processObj'
    ])
  },
  mounted() {
    this.formValidate ={
      processCode:this.processObj.processCode,
      ...this.formValidate
    }
    this.queryPage()
    // this.queryProcessInfo()
    this.getdeptList()
    this.getList()
  },
  methods:{
    close() {
      this.$router.go(-1)
    },
    crossSectorChange(val){
      if (val !== 1){
         this.deptId = ''
         this.formValidate.deptId = ''
      }
    },
    getdeptList(){
      this.deptList = []
      let data = {
        pageNo:1,
        pageSize:100
      };
      this.axios({
        method: 'post',
        url: '/basic/dept/list',
        data
      }).then(res => {
        if(res.code === 200){
          this.deptList = res.data.list
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    getList() {
      this.peoplelist = []
      // let str = ''
      // str = query.includes('-') ? query.substr(0,query.indexOf('-')) : query
      // if (str !== '' && str) {
      //   this.loading = true
      //   this.axios({
      //     method: 'get',
      //     url: '/basic/user/searchUser',
      //     params: {
      //       key: str
      //     }
      //   }).then(res => {
      //     if (res.code === 200) {
      //       this.peoplelist = res.data.map(item => {
      //         return {
      //           ...item,
      //           showName: item.empno + '-' + item.realname
      //         }
      //       })
      //     } else {
      //       this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
      //     }
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // }else {
      //   this.peoplelist = []
      // }
      let params = {
        pageNum: 1,
        pageSize: 100,
      };
      this.axios({
        method: 'get',
        url: '/basic/role/page',
        params
      }).then(res => {
        if (res.code === 200) {
          this.peoplelist = res.data.list
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    // async queryProcessInfo(){
    //   this.oragdataList = []
    //   const {data} = await queryPage({
    //     pageNum: 1,
    //     pageSize: 100
    //   })
    //   if (data.list && data.list.length){
    //     this.oragdataList = data.list
    //   }
    // },
    addEdit(row){
      this.peopleRoleIds = []
      this.targetRow = {}
      if (row.id){
        // this.getList('1')
         this.targetRow = row
         this.titleText = `${this.$t('common.Edit')}`
         this.deptId = row.deptId
         this.formValidate = {
          processCode:this.processObj.processCode,
          processIndex:row.processIndex,
          crossSector: row.crossSector == true ? 1 : 0,
          nodeType: row.nodeType == true ? 1 : 0,
          rollbackId:row.rollbackId,
          sourceId:row.sourceId,
          deptId:row.deptId,
          targetId:row.targetId,
          processNodeName: row.processNodeName
        }
        // console.log(row.proce/*ssNodeRoles)
        // this.$nextTick(()=>{
          if (row.processNodeRoles && row.processNodeRoles.length){
            this.peopleRoleIds = row.processNodeRoles.map(val=>val.roleId)
            this.$forceUpdate()
          }
        // })

      }else {
        this.titleText = `${this.$t('common.New')}`
        this.formValidate = {
          processCode:this.processObj.processCode,
          processIndex:1
        }
        this.peopleRoleIds = []
        this.deptId = ''
      }
      this.firstDeviceVisible = true
    },
    handleFirstCancel(){
      this.firstDeviceVisible = false
    },
    async delClick(row){
      const obj = {
        delIds:[row.id]
      }
      const res = await delProcessInfo(obj)
      if (res.code === 200){
         this.queryPage()
         this.$Message.success(res.msg)
      }else {
        this.$Message.warning(res.msg)
      }
    },
    async handleFirstOk(){
      const obj = {
        processId:this.processObj.id,
        crossSector: this.formValidate.crossSector == 1 ? true : false,
        nodeType: this.formValidate.nodeType == 1 ? true : false,
        rollbackId:this.formValidate.rollbackId,
        sourceId:this.formValidate.sourceId,
        targetId:this.formValidate.targetId,
        processNodeName: this.formValidate.processNodeName,
        processIndex: this.formValidate.processIndex,
        deptId: this.deptId,
        roleIds:this.peopleRoleIds
      }
      let res;
      if (this.targetRow.id){
        obj.id = this.targetRow.id
        res = await editProcessInfo(obj)
      }else {
        res = await addProcessInfo(obj)
      }
      if (res.code === 200){
        this.queryPage()
        this.$Message.success(res.msg)
        this.handleFirstCancel()
      }else {
        this.$Message.warning(res.msg)
      }
      // const {data} = await addProcessInfo(obj)
      // console.log(data)
    },
    async queryPage(){
      this.dataList = []
      const obj = {
        processId:this.processObj.id
      }
      const {data} = await queryPage(obj)
      if (data && data.length){
        this.dataList = data
        this.oragdataList = data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nodebtn{
  float: right;
}
</style>
